<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="./css/style.css" rel="stylesheet">
</head>
<body>
  <div class="clock">
    <div class="center-nut"></div>
    <div class="center-nut2"></div>
    <div class="indicators">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="sec-hand">
      <div class="sec"></div>
    </div>
    <div class="min-hand">
      <div class="min"></div>
    </div>
    <div class="hr-hand">
      <div class="hr"></div>
    </div>
  </div>
  <script>
    const sec = document.querySelector(".sec");
    const min = document.querySelector(".min");
    const hr = document.querySelector(".hr");
    setInterval(function() {
      let time = new Date();
      // 获取秒数，并计算秒数在表上的角度
      let secs = time.getSeconds() * 6;
      let mins = time.getMinutes() * 6;
      let hrs = time.getHours() * 30;
      sec.style.transform = `rotateZ(${secs}deg)`
      min.style.transform = `rotateZ(${mins}deg)`
      hr.style.transform = `rotateZ(${hrs + (mins/12)}deg)`
    })
  </script>
</body>
</html>